今天要寫的主題是旋轉太極的效果
用 css 畫出太極的符號 再讓它做反覆旋轉的效果
一樣把基本架構寫好

<div class="centered">
  <div class="taichi-wrapper rotate-ani">
    <div class="taichi-white-bk taichi-bk"></div>
    <div class="taichi-dark-bk taichi-bk"></div>
  </div>
</div>

然後設定好基本的 css
這邊比較特殊的是分別設定 border-radius 上+左跟下+右，繪製出半圓形
太極中間的次大圓+最小圓都用偽元素來繪製，再搭配絕對位置來定位

body{
 background:#363636; 
}

.centered{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.taichi-wrapper{
  width:8em;
  height:8em;
}

.taichi-bk{
  width:4em;
  height:8em;
}

.taichi-white-bk{
  border-radius:4em 0 0 4em;
  background:#f4f4f4;
  position:absolute;
  left:0;
}

.taichi-white-bk:before{
  content:"";
  width:4em;
  height:4em;
  border-radius:4em;
  background:#f4f4f4;
  position:absolute;
  left:2em;
  z-index:5;
}
.taichi-white-bk:after{
  content:"";
  width:1.5em;
  height:1.5em;
  border-radius:1.5em;
  background:#232323;
  position:absolute;
  left:3.25em;
  top:1.25em;
  z-index:5;
}

.taichi-dark-bk{
  background:#232323;
  border-radius:0 4em 4em 0;
  position:absolute;
  right:0;
}

.taichi-dark-bk:before{
  content:"";
  width:4em;
  height:4em;
  border-radius:4em;
  background:#232323;
  position:absolute;
  right:2em;
  bottom:0;
  z-index:5;
}

.taichi-dark-bk:after{
  content:"";
  width:1.5em;
  height:1.5em;
  border-radius:1.5em;
  background:#f4f4f4;
  position:absolute;
  right:3.25em;
  bottom:1.25em;
  z-index:5;
}

到這邊 太極就出現了

接下來把動畫效果寫進來

.rotate-ani{
  animation:rotate-taichi 2s ease-in infinite alternate;
}
 
@keyframes rotate-taichi {
  0%{transform:rotate(0deg);}
  100%{transform:rotate(720deg);}
}

到這邊就完成了
一樣附上本次的 codepen 如下
https://codepen.io/UHU/pen/GYPYKy